<template>
<client-only>
  <video :src="src"  ref="video" id="myVideo" controls></video>
</client-only>
</template>
  <script>

export default {
  name: "VideoPlay",

  data() {
    return {
      // src: require('@/assets/files/Bao.mp4'), // 相对路径
      src: "https://media.w3.org/2010/05/sintel/trailer.mp4",
      // poster: require('@/assets/images/Bao.jpg'),
      poster:
        "https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/bao.jpg",
    };
  },
  mounted() {

    let id = this.$route.query.id

    this.src = id 




    this.play()

  },


  methods:{
    play(){
            // 获取video和canvas元素
    const video = document.getElementById("myVideo");
    const canvas = document.createElement("canvas");

    // 播放视频并在视频加载后捕获第一帧
    video.addEventListener("loadeddata", function () {
      // 设置canvas尺寸与视频相同
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      // 在canvas上绘制当前视频帧
      const ctx = canvas.getContext("2d");
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 将canvas的内容转换为图片
      const firstFrame = canvas.toDataURL("image/png");

      // 可以将firstFrame设置为视频封面或其他用途
      // 例如设置为视频封面的img标签的src
      document.getElementById("videoCover").src = firstFrame;
    });


    video.play();
    }
  }
};
</script>

  <style  scoped>
video {
  width: 1130px;
  margin: 0 auto;
  display: block;
}
</style>